<template>
    <div class='local-life-goods'>
        <c-title text="商品详情"></c-title>
        <GoodsSwiper :thumb_url="[goodsInfo.has_one_goods && goodsInfo.has_one_goods.thumb]"
            :thumb="[goodsInfo.has_one_goods && goodsInfo.has_one_goods.thumb]"></GoodsSwiper>

        <div class="head">
            <div class="head-top">
                <div class="head-top-left">
                    <div class="head-goods-price"><span class="fz-26">{{ $i18n.t('money') }}</span>{{
                        goodsInfo.has_one_goods && goodsInfo.has_one_goods.price }}</div>
                    <div class="flex-c">
                        <span class="original-price">{{ $i18n.t('money') }}{{ goodsInfo.has_one_goods &&
                            goodsInfo.has_one_goods.market_price }}</span>
                        <span class="head-sale">已售 {{ goodsInfo.has_one_goods && goodsInfo.has_one_goods.show_sales
                           +  goodsInfo.has_one_goods && goodsInfo.has_one_goods.virtual_sales }}</span>
                    </div>
                </div>
                <div class="head-top-right" v-if=goodsInfo.sale_end_at>
                    <div class="end-tips">
                        {{now>goodsInfo.sale_end_at?'已结束':goodsInfo.sale_end_at>now&&now>goodsInfo.sale_start_at?'距离结束还剩':'距离开始还剩'}}
                    </div>
                    <div v-if="goodsInfo.sale_start_at>now">
                        <van-count-down :time="fun.getTimeDifference(goodsInfo.sale_start_at)" format="DD 天 HH 时 mm 分 ss 秒" @finish="countDownFinish">
                            <template #default="timeData">
                                <span class="date" v-if="timeData.days>0">{{ timeData.days }}天</span>
                                <span class="block">{{ timeData.hours<10?'0'+timeData.hours: timeData.hours}}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes<10?'0'+timeData.minutes: timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds <10?'0'+timeData.seconds: timeData.seconds}}</span>
                            </template>
                        </van-count-down>
                    </div>
                    <div v-else-if="goodsInfo.sale_end_at>now">
                        <van-count-down :time="fun.getTimeDifference(goodsInfo.sale_end_at)" format="DD 天 HH 时 mm 分 ss 秒"  @finish="endFinish">
                            <template #default="timeData">
                                <span class="date" v-if="timeData.days>0">{{ timeData.days }}天</span>
                                <span class="block">{{ timeData.hours<10?'0'+timeData.hours: timeData.hours}}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes<10?'0'+timeData.minutes: timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds <10?'0'+timeData.seconds: timeData.seconds}}</span>
                            </template>
                        </van-count-down>
                    </div>
                </div>

            </div>
            <div class="head-bottom">

                <div class="head-title">{{ goodsInfo.has_one_goods && goodsInfo.has_one_goods.title }}</div>
                <div class="flex-c-b" @click="goto('couponStore')"
                    v-if="available_coupon && available_coupon.length !== 0">
                    <div class="head-coupon">
                        <span v-for="coupon in available_coupon">{{ coupon.coupon_method == 1 ?
                            `满${coupon.enough}减${coupon.deduct}`
                            : `满${coupon.enough}打${coupon.discount}折` }}</span>
                    </div>
                    <div> <i class="iconfont icon-icon_more11"></i></div>
                </div>
                <div class="head-bottom-info">
                    <div class="flex-c-b mb-24" @click='hanlde_popup()'>
                        <div class="flex-c">
                            <span class="head-tips">须知</span>
                            <span class="c-6E6E79 fz-26" v-if="purchase">{{ purchase.expire && purchase.expire.type == 1
                                ?
                                `有效期：购买后${purchase.expire && purchase.expire.days}天内有效` :
                                `有效期：${purchase.expire && purchase.expire.at}`
                                }}</span>
                        </div>
                        <i class="iconfont icon-icon_more11"></i>
                    </div>
                    <div class="flex-c mb-24">
                        <span class="head-tips">服务</span>
                        <span class="c-6E6E79 fz-26" v-if="purchase && purchase.booking_rule">
                            {{ purchase.booking_rule.need_booking == 2 ? '免预约' :
                                `提前${purchase.booking_rule.advance_num}${purchase.booking_rule.advance_unit == 1 ? '天' :
                                    purchase.booking_rule.advance_unit == 2 ? '小时'
                                        : '分钟'}`
                            }}
                        </span>
                    </div>
                    <div class="flex-c-b" @click="goto('store')">
                        <div class="flex-c">
                            <span class="head-tips">门店</span>
                            <span class="c-6E6E79 fz-26">{{ store.length }}家门店适用</span>
                        </div>
                        <i class="iconfont icon-icon_more11"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-address-wrapper" v-if="store && store.length !== 0" @click="goto('my-store')">
            <div class="title">{{ store[0].name }}</div>
            <div class="flex-b">
                <div class="main-address-left">
                    <div class="main-address">{{ store[0].address_detail }}</div>
                    <div class="main-distance" v-if="store[0].distance">
                        <i class="iconfont icon-dizhi1"></i>
                        <span class="main-distance-tips">距离{{ store[0].distance }}</span>
                    </div>
                </div>
                <div class="main-address-right">
                    <div style="margin-right: 1.1563rem;" class="main-address-right-icon" @click.stop="navigation()">
                        <span class="iconfont icon-zx_map_local"></span>
                        <span class="iconfont-txt">地图</span>
                    </div>
                    <div class="main-address-right-icon" @click.stop="callStore()">
                        <span class="iconfont icon-zx_map_tel"></span>
                        <span class="iconfont-txt">电话</span>
                    </div>
                </div>
            </div>

        </div>
        <div v-if="is_show_component">
            <purchase-notes ref="purchase-notes" :goodsNotes="purchase" :goodsDetail="packages"
                :booking_rule="purchase.booking_rule">
                <div class='goods-details' v-if="goodsInfo.has_one_goods && goodsInfo.has_one_goods.content">
                    <div class='goods-details-tips'>商品详情</div>
                    <div id="a_content" v-html="goodsInfo.has_one_goods && goodsInfo.has_one_goods.content"></div>
                </div>
            </purchase-notes>
        </div>
        <!--价格说明-->
        <div class="price-desc">
            <p class="price-desc-title ">价格说明</p>
            <div id="a_content" v-html="goodsInfo.explain || ''"></div>
        </div>

        <div class="footer" :class="{ 'pc-style': fun.isPc() }"  v-if="goodsInfo&&goodsInfo.has_one_goods">
            <div class="footer-top">
                <div class="sign" @click="sign">
                    <i class="iconfont icon-life-game-sign"></i>
                </div>
                <div class="goods-nums">{{ nums }}</div>
                <div class="plus" @click="nums++">
                    <i class="iconfont icon-life-game-plus"></i>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="pay-price"><span style="font-size: .875rem;">{{ $i18n.t('money') }}</span>{{
                    goodsInfo.has_one_goods && goodsInfo.has_one_goods.price }}</div>
                <button @click="buy_handle" :class="goodsInfo.sale_start_at&&(disabled||goodsInfo.sale_start_at>this.now||now>goodsInfo.sale_end_at)?'disabled':''">去购买</button>
            </div>
        </div>
    </div>
</template>

<script>
import GoodsSwiper from "components/goods/children/goods_swiper"; //轮播(新)
import purchaseNotes from "./purchaseNotes/purchaseNotes";
export default {
    components: {
        purchaseNotes, GoodsSwiper
    },
    data() {
        return {
            disabled:0,
            nums: 1,
            goodsInfo: {},
            store: [],
            point:{
                lat:"",
                lng:""
            },
            is_show_component: false,
            now:0,
            packages: [], available_coupon: [], //优惠券
        };
    },
    activated() {
        this.now =  Math.floor(Date.now() / 1000);// 获取不包含毫秒的当前时间戳
        this.disabled = 0;
        this.nums = 1;
        let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
        if (!myLoaction) {
            this.fun
                .getLocation()
                .then((res) => {
                    this.point = res.point;
                    this.getData();
                })
                .catch(err => {
                    console.log(err);
                    this.getData();
                });
        } else {
            this.point = myLoaction ? myLoaction.point : {};
            this.getData();
        }
 
    },
    methods: {
        endFinish(){
            this.disabled = 1;
        },
        countDownFinish(){
            this.getData();
        },  
        hanlde_popup() {
            this.$refs['purchase-notes'].hanlde_popup();
        },
        goto(type) {
            if (type == 'store') {
                this.$router.push(this.fun.getUrl("local_life_apply_store", { goods_id: this.$route.params.goods_id }))
            } else if (type == 'couponStore') {
                this.$router.push(this.fun.getUrl("couponStore"))
            } else if (type == 'my-store') {
                this.$router.push(this.fun.getUrl("local_life_store", { store_id: this.store[0].store_id }))

            }
        },
        async getData() {
            let json = { goods_id: this.$route.params.goods_id,longitude:this.point.lng,latitude:this.point.lat }
            let { result, msg, data } = await $http.post("plugin.local-life.api.goods.detail",json , '.')
            if (result) {
                this.goodsInfo = data;
                this.store = data.store;
                this.packages = data.package;
                this.available_coupon = data.available_coupon;
                this.purchase = data.purchase
                this.$nextTick(() => {
                    this.is_show_component = true;
                })
            } else {
                this.$toast(msg);
            }
        },
        buy_handle() {
            if(this.goodsInfo.sale_start_at){
                if(this.disabled==1||this.goodsInfo.sale_start_at>this.now||this.now>this.goodsInfo.sale_end_at){
                    return;
                }
            }
            let _json = {
                orderType: "local_life",
                tag: "local_life",
                goodsId: this.$route.params.goods_id,
                // optionsId: this.goodsInfo.has_many_options[0].id,
                total: this.nums
            };
            this.$router.push(this.fun.getUrl("goodsorder", {}, _json));
            // this.$router.push(this.fun.getUrl("local_life_order", { goods_id: this.$route.params.goods_id ,total:this.nums}));
        },
        callStore() {
            window.location.href = "tel://" + this.store[0].tel;
        },
        navigation() {
            let point = this.fun.bd_decrypt(this.store[0].longitude, this.store[0].latitude);
            this.fun.goToWXAdress(point, this.store[0].name);
        },
        sign() {
            if (this.nums <= 1) {
                return
            }
            this.nums--;
        }
    }
};
</script>

<style scoped lang='scss'>
/** **/
.pc-style {
    position: fixed !important;
    width: 375px;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%);
}

.disabled {
    background-color:#D6D6DC !important;
}
.local-life-goods {
    padding-bottom: 6.25rem;

    .head {
        margin: .625rem .75rem;
    }

    .colon {
        display: inline-block;
        font-weight: 500;
        font-size: .875rem;
        color: #FFFFFF;
        margin: 0 .1875rem;
    }

    .date {
        display: inline-block;
        font-weight: 500;
        font-size: .8125rem;
        margin-right: .2813rem;
        color: #FFFFFF;
    }

    .block {
        font-weight: 500;
        font-size: .75rem;
        color: #FD4156;
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        background: #FFFFFF;
        border-radius: .375rem .375rem .375rem .375rem;
        text-align: center;
        line-height: 1.25rem;
    }

    .head-goods-price {
        font-weight: bold;
        line-height: 1;
        font-size: 1.625rem;
        text-align: left;
        color: #FFFFFF;
    }

    .head-sale {
        font-weight: 400;
        font-size: .75rem;
        color: #FFFFFF;
    }

    .original-price {
        text-decoration: line-through;
        font-weight: 400;
        font-size: .75rem;
        color: #FEF5F5;
        margin-right: .3438rem;
    }

    .end-tips {
        font-weight: 500;
        font-size: .8125rem;
        color: #FFFFFF;
        line-height: 1;
        margin-bottom: .4375rem;
    }

    .head-top {
        height: 5rem;
        background: linear-gradient(353deg, #FF5F4D 0%, #FC3A57 17%, rgba(254, 50, 85, 0.97) 54%, rgba(255, 199, 127, 0.96) 100%);
        border-radius: .9375rem .9375rem 0rem 0rem;
        padding: .75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .head-bottom-info {
        border-top: 1px solid #F0F0F1;
        padding-top: .9375rem;
        margin-top: .4375rem;
    }

    .icon-icon_more11 {
        color: #AAAAB3;
    }

    .head-tips {
        margin-right: 1.125rem;
        font-weight: 500;
        font-size: .8125rem;
        color: #00001C;
    }

    .flex-c {
        display: flex;
        align-items: center;
    }

    .mb-24 {
        margin-bottom: .75rem;
    }

    .flex-c-b {
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .fz-26 {
        font-size: .8125rem;
    }

    .c-6E6E79 {
        color: #6E6E79
    }

    .head-coupon {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        margin-top: .625rem;

        span {
            font-weight: 400;
            font-size: .625rem;
            padding: .25rem .3438rem;
            border-radius: .1875rem;
            text-wrap: nowrap;
            color: #F96D20;
            flex-shrink: 0;
            background-color: #FFF0E8;
            margin-right: .375rem;
            margin-bottom: .375rem;
            box-sizing: border-box;
        }
    }

    .head-bottom {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .9375rem .75rem;
        box-sizing: border-box;
        margin-top: -0.9375rem;
    }

    .head-title {
        font-weight: bold;
        font-size: 1.0625rem;
        color: #00001C;
        text-align: left;
    }

    .iconfont-txt {
        line-height: 1;
        font-weight: 400;
        font-size: .625rem;
        color: #00001C;
    }

    .title {
        text-align: left;
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
        margin-bottom: .4688rem;
    }

    .flex-b {
        display: flex;
        justify-content: space-between;

    }

    .main-address-wrapper {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .75rem;
        margin: .625rem .75rem;
    }

    .main-distance {
        display: flex;
        align-items: baseline;
        line-height: 1;
        margin-top: .5313rem;
    }

    .main-distance-tips {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
    }

    .main-address {
        font-weight: 400;
        text-align: left;
        font-size: .75rem;
        color: #00001C;
    }

    .main-address-right-icon {
        display: flex;
        flex-direction: column;
        text-wrap: nowrap;
    }

    .icon-dizhi1 {
        color: #999999;
        font-size: .75rem;
        margin-right: .1875rem;
    }

    .icon-zx_map_local,
    .icon-zx_map_tel {
        width: 1.4375rem;
        height: 1.4375rem;
        font-size: .75rem;
        line-height: 1.4375rem;
        margin-bottom: .25rem;
        background: #EAEDF3;
        border-radius: .5625rem .5625rem .5625rem .5625rem;
    }

    .main-address-right {
        display: flex;
        align-items: center;
        margin-left: 1.1563rem
    }

    .goods-details-tips {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        text-align: left;
        margin-bottom: .8438rem;
    }

    .goods-details {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .8438rem .75rem .8125rem;
        margin: .625rem .625rem 0;
        box-sizing: border-box;
    }

    .price-desc {
        background-color: #fff;
        padding: 0.8rem;
        margin: 10px;
        border-radius: 10px;

        .price-desc-title {
            text-align: left;
            color: #1f1f1f;
            font-weight: bold;
            margin-bottom: 0.8rem;
        }
    }

    .pay-price {
        font-weight: 500;
        font-size: 1.25rem;
        color: #F15353;
    }

    .footer-bottom {
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1.125rem;
        padding-right: .7188rem;
    }

    button {
        width: 14.0625rem;
        height: 2.5rem;
        background-color: #F15353;
        color: #fff;
        font-weight: 500;
        font-size: .9375rem;
        border-radius: 1.25rem;
        border: none;
    }

    .plus {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #F15353;
        border-radius: 1.5625rem 1.5625rem 1.5625rem 1.5625rem;
    }

    .goods-nums {
        margin: 0 .4688rem;
        font-weight: 400;
        font-size: .875rem;
        color: #00001C;
    }

    .sign {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #F15353;
        border: 1px solid #F15353;
        border-radius: 1.5625rem 1.5625rem 1.5625rem 1.5625rem;
    }

    .footer-top {
        display: flex;
        align-items: center;
        height: 2.5625rem;
        padding-left: 1.1875rem;
        border-bottom: 1px solid #F5F5F5;
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
    }
}
</style>